<template>
  <div>
    <input 
      v-model="searchTerm" 
      @input="handleSearchInput"
      placeholder="输入搜索词..."
    >
    <ul v-if="suggestions.length">
      <li v-for="suggestion in suggestions" :key="suggestion">
        {{ suggestion }}
      </li>
    </ul>
  </div>
</template>

<script>
import abbrev from 'abbrev';

export default {
  data() {
    return {
      searchTerm: '',
      allOptions: ['apple', 'application', 'banana', 'berry', 'blueberry'],
      suggestions: []
    };
  },
  methods: {
    handleSearchInput() {
      if (!this.searchTerm) {
        this.suggestions = [];
        return;
      }
      
      const abbrevs = abbrev(...this.allOptions);
      this.suggestions = Object.keys(abbrevs)
        .filter(key => key.startsWith(this.searchTerm))
        .map(key => abbrevs[key]);
    }
  }
};
</script>